<script setup lang="ts">
import { RouterLink,useRouter } from 'vue-router';
import { userStore } from '../stores/counter'
import { ElMessage } from 'element-plus';

const store = userStore()
const route = useRouter()
const handleCommand = (key: string) => {
    if(key === 'setting') { 
        route.push('mine')
    }else if (key === 'logout') {
        localStorage.removeItem('token')
        ElMessage.success('退出登录成功')
        route.replace('login')
    }
}


</script>

<template>
<div class="page">
    <header>
        <div class="logo">LOGO</div>
        <nav>
            <RouterLink to="/">首页</RouterLink>
            <RouterLink to="/list">列表页面</RouterLink>
            <RouterLink to="/mine">个人中心</RouterLink>
        </nav>
        <div class="info">
            <!-- {{ store.userInfo }} -->
            <el-space wrap>
                <el-avatar shape="square" :size="50" :src="store.userInfo?.avatar" />
                
                <el-dropdown @command="handleCommand">
                    <span class="username">
                    {{ store.userInfo?.username }}
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="setting">个人中心</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-space>
        </div> 
    </header>
    <main>
        <slot></slot>
    </main> 
</div>
</template>

<style lang="scss" scoped>
.page{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    header{
        height: 70px;
        background: #5182ee;
        display: flex;
        nav{
            flex: 1;
            padding: 0 20px;
            display: flex;
            align-items: center;
            a{
                margin: 0 15px;
                padding: 10px;
                color: #ffffff;
                &:hover, &.router-link-active{
                    background: #4068bf;
                }
            }
        }
    }
    main{
        flex: 1;
        background: #eee;
    }
}
.logo{
    width: 200px;
    padding: 0 15px;
    line-height: 70px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
}
.info{
    margin-right: 30px;
    margin-top: 10px;
}
.username{
    color: #ffffff;
}
</style>